<template>
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="80px" status-icon>
        <el-form-item label="用户名" prop="userName">
            <el-input v-model="ruleForm.userName" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="姓名" prop="realName">
            <el-input v-model="ruleForm.realName" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
            <el-select v-model="ruleForm.gender" placeholder="请选择性别">
                <el-option label="男" :value="0" />
                <el-option label="女" :value="1" />
            </el-select>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
            <el-input v-model="ruleForm.mobile" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="岗位" prop="post">
            <el-input v-model="ruleForm.post" placeholder="请输入岗位" />
        </el-form-item>
        <el-form-item label="所属部门" prop="orgId">
            <el-cascader v-model="ruleForm.orgId" :options="orgIds" :props="{
                checkStrictly: true, value: 'id', label: 'name', emitPath: false
            }" clearable placeholder="请选择所属部门" />
        </el-form-item>
        <el-form-item label="角色" prop="roleIdList">
            <el-select v-model="ruleForm.roleIdList" placeholder="请选择角色" multiple filterable collapse-tags
                collapse-tags-tooltip>
                <el-option :label="item.name" :value="item.id" v-for="(item, index) in roleIds" :key="index" />
            </el-select>
        </el-form-item>
        <el-form-item label="附件">
            <upload-file style="width: 100%;"></upload-file>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { getUserDetail } from '@/api/SystemSet/UserManage'
import UploadFile from '@/components/UploadFile.vue'

const props = defineProps({
    editItem: Object
})

onMounted(() => {
    if (props.editItem) {
        getEditData()
    }
})

const ruleFormRef = ref<FormInstance>()
let ruleForm = reactive({
    userName: '',
    realName: '',
    gender: '',
    mobile: '',
    post: '',
    orgId: '',
    roleIdList: []
})

const rules = reactive<FormRules>({
    userName: [
        { required: true, message: '请输入用户名', trigger: 'change' },
    ],
    realName: [
        { required: true, message: '请输入姓名', trigger: 'change' },
    ],
    gender: [
        { required: true, message: '请选择性别', trigger: 'change' },
    ],
    mobile: [
        { required: true, message: '请输入手机号', trigger: 'change' },
    ],
    post: [
        { required: true, message: '请输入岗位', trigger: 'change' },
    ],
    orgId: [
        { required: true, message: '请选择所属部门', trigger: 'change' },
    ],
    roleIdList: [
        { required: true, message: '请选择角色', trigger: 'change' },
    ],
})

const orgIds = [
    {
        id: 1,
        name: '研发部',
    },
    {
        id: 4,
        name: '销售部',
        children: [
            {
                id: 2,
                name: '销售1部',
            },
            {
                id: 3,
                name: '销售2部',
            },
        ],
    },
]

const roleIds = [
    { name: '管理员', id: 1 },
    { name: '开发人员', id: 2 },
    { name: '销售人员', id: 3 }
]

const getEditData = () => {
    getUserDetail({ id: props.editItem?.id }).then((res: any) => {
        res.roleIdList = res.roleIdList.split(',').map((el: any) => +el)
        Object.assign(ruleForm, res)
    })
}

defineExpose({
    ruleFormRef,
    ruleForm
})
</script>

<style lang="less" scoped>
.el-select,
:deep(.el-cascader) {
    width: 100%;
}
</style>